<style>
	.xx{
		background-color: #087ebf;
		color: white;
		height: 35px;
		width: 85px;
		font-size: 15px;
	}
	.cz{
		background-color: royalblue;
		color: white;

	}
	table.altrowstable {
		font-family: verdana,arial,sans-serif;
		font-size:11px;
		color:#333333;
		border-width: 1px;
		border-color: #a9c6c9;
		border-collapse: collapse;
	}
	table.altrowstable thead th {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #a9c6c9;
	}
	table.altrowstable tbody td {
		border-width: 1px;
		padding: 8px;
		padding-left: 40px;
		padding-right: 40px;
		border-style: solid;
		border-color: #a9c6c9;
	}


</style>

<div>

		<div id="fyxx">
			<h3>房源信息</h3>
			<div style="padding-bottom:25px" id="cz">
			<span class="input-group-btn">
				
				<input type="text" name="fwjs" id="room" placeholder="房屋居室" />
				<input type="text" name="mj" id="area" placeholder="面积" />
				<input type="text" name="jg" id="price" placeholder="价格" />
				<input type="text" name="wz" id="place" placeholder="位置" />

				<button class="cz">查找</button>
				
			</span>
			</div>
			
		</div>	

		<div>
			<table id="table-id" class="altrowstable">
			<thead>
				<tr>
					<th><input type="checkbox" onclick="checkAll()" id="all"></th>

					<th>房屋居室</th>
					<th>房屋面积(/平方)</th>
					<th>价格(元/月)</th>
					<th>位置</th>
					<th>状态</th>
					
				</tr>
			</thead>
			<tbody id="tbodyId">
				<tr>

				   <td colspan="7">数据正在加载中...</td>
				</tr>
			</tbody>
		</table>
		</div>
		<div id="pageId">


		</div>
		<div style="padding-top: 40px;padding-left: 635px">

			<button class="fdxx" >房东信息</button>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button class="wyzf"  >我要租房</button>
		</div>

</div>
	<!-- jQuery 3 -->
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript">




		$(function (){
			$("#pageId").load("doPageUI",doGetObject);
			$(".cz").on("click",dochazhao)

		})
		$(function (){
			$(".fdxx").on("click",doFdxx);
			$(".wyzf").on("click",doDdlb,)
		})
		function doFdxx(){
			let url="fdxx-list"

			$("#mainContentId").load(url)

		}

		function doDdlb(){
			var id=doGetCheckedId();
			console.log(id);
			if(!id){
				alert("请先选择");
				return;
			}
			doFindObjectById(id);



		}
		function doFindObjectById(id){
			let url=`/findHouseById`
			let params= {"id":id}
			$.ajax({
				url:url,
				data: params,
				success(result) {
					if(result.state==1){
						$("#mainContentId").data("rowData",result.data);
						doLoadPage();
					}else{
						alert(result.message);
					}
				}

			});
		}
		function doGetCheckedId(){
			return $("tbody input[name='radioId']:checked").val();
		}
		function doLoadPage(){

			$("#mainContentId").load("ddlb-list")
		}

		function dochazhao(){
			$("#pageId").data("pageCurrent",1);
			doGetObject()
		}
		function doGetObject() {
			let pageCurrent=$("#pageId").data("pageCurrent");
			if(!pageCurrent)pageCurrent=1
			let params = {pageCurrent:pageCurrent,
				          room:$("#room").val(),
				          area:$("#area").val(),
					      price:$("#price").val(),
					      place:$("#place").val(),
			              state:'可租'
				       };
			console.log(params)


			let url = 'doFindHouse';

			$.ajax({

				url:url,
				data:params,
				success(result) {
					doFindAll(result)


				}

			});
		}

			function doFindAll(result) {
				if (result.state == 1) {

					doSetTableBodyRows(result.data.records);
					doSetPagination(result.data);
				} else {

					// doSetTableBodyErrors(result.message);
				}
			}
			function doSetTableBodyRows(records){
			console.log(records)


				let tBody=$("#tbodyId");
				tBody.empty();
				for (let i=0;i<records.length;i++){
					tBody.append(doCreateRow(records[i]));
				}
			}
			function doCreateRow(rows){
				return `<tr>
						<td><input type="checkbox" name="radioId" value="${rows.id}"></td>

						<td>${rows.room}</td>
						<td>${rows.area}</td>
						<td>${rows.price}</td>
						<td>${rows.place}</td>
						<td>${rows.state}</td>


						</tr>`
			}



		function checkAll(){
			//点击全选后，普通复选框的状态和全选复选框的状态保持一致
			//点击全选复选框后，获取多选复选框的状态值
			var isChecked = ($("#all").prop("checked"));//checked:复选框的状态属性值
			console.log(isChecked);
			//将全选复选框的状态值设置给普通复选框
			//（即全选框和所有普通复选框状态一致）
			$("input[id!='all']:checkbox").prop("checked",isChecked);
			/*$(":checkbox")/*获取所有的复选框*/
			/*$("input[id!='all']:checkbox")
			 *获取所有的复选框但不包括id==all的复选框（即排除全选框）*/
		}
		/*实现思路：点击任意一个普通复选框，若是全选状态，则选中全选，否则就取消全选
		  1）给所有的普通复选框绑定点击事件
		  2）在点击事件函数中，判断当前被选中的普通复选框的个数，
		     是否等于所有普通复选框的个数，
		  3）如果相等，则说明处于全选状态，将全选复选框选中；
		  4）如果不相等，说明处于非全选状态，将全选复选框取消
		*/
		$(function(){
			//1、给所有的普通复选框绑定点击事件
			// var oCheckboxs = $("input[id!='all']:checkbox");
			// oCheckboxs.click(checkboxClick);
			$("input[id!='all']:checkbox").click(checkboxClick);
		});

		function checkboxClick (){

			//2、在点击事件函数中，判断当前被选中的普通复选框的个数(checkedLen)，
			//   是否等于所有普通复选框的个数(checkboxLen)

			let checkedLen  = $("input[id!='all']:checkbox:checked").length;
			let checkboxLen = $("input[id!='all']:checkbox").length;
			// if(checkedLen==checkboxLen){
			//   $("#all").prop("checked",true);
			//   //如果相等，则说明处于全选状态，将全选复选框选中；
			// }else{
			//   $("#all").prop("checked",false);
			//   //如果不相等，说明处于非全选状态，将全选复选框取消
			// }
			$("#all").prop("checked",checkedLen==checkboxLen);
		}





	</script>

